<template>
  <TodayTodo v-if="!toHistory" :key="updateKey" v-model:today-todo-list="todayTodoList"/>
  <HistoryTodo v-else :key="updateKey+1" v-model:history-todo-list="historyTodoList" @update="updateHistoryList"/>
  <a-float-button
      tooltip="新建TODO"
      type="primary"
      :style="{
      left: '15vw',
      bottom:'10vh'
    }"
      @click="showModal"
  >
    <template #icon>
      <plus-outlined/>
    </template>
  </a-float-button>
  <a-float-button
      :tooltip="toHistory?'查看今日TODO':'查看历史TODO'"
      type="primary"
      :style="{
      left: '18vw',
      bottom:'10vh'
    }"
      @click="moveToHistory"
  >
    <template #icon>
      <history-outlined v-if="!toHistory"/>
      <calendar-outlined v-else/>
    </template>
  </a-float-button>
  <a-modal v-model:open="open" title="新建TODO" @ok="handleOk" :confirm-loading="confirmLoading">
    <a-form :model="createTodo" :label-col="labelCol" :wrapper-col="wrapperCol" >
      <a-form-item label="标题">
        <a-input v-model:value="createTodo.title" />
      </a-form-item>
      <a-form-item label="对本项TODO的说明">
        <a-textarea v-model:value="createTodo.todoProfile" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import {CalendarOutlined, HistoryOutlined, PlusOutlined} from '@ant-design/icons-vue';
import {onMounted, ref} from "vue";
import TodayTodo from "./TodayTodo.vue";
import HistoryTodo from "./HistoryTodo.vue";
const toHistory = ref(false);
const moveToHistory = () => {
  toHistory.value = !toHistory.value;
}
const open = ref(false);
const showModal = () => {
  open.value = true;
};
const confirmLoading =ref(false)
const updateKey = ref(0);
const handleOk = () => {
  let status = false;
  myAxios.post('/todo/create',createTodo).then(
      res => {
        if(res.code === 0){
          status = true;
        }
      }
  ).catch(error => {
    console.log("新建TODO出现错误",error);
  })
  confirmLoading.value = true;
  setTimeout(()=>{
    getTodayTodoList();
    getHistoryTodoList(-1);
    updateKey.value = updateKey.value++;
    open.value = false;
    confirmLoading.value = false;
    createTodo.title ='';
    createTodo.todoProfile = '';
    if (status){
      message.success('添加成功')
    }
  },2000)
};
const updateHistoryList = (data) =>{
  historyTodoList.value = data;
}
import { reactive, toRaw } from 'vue';
import myAxios from "../axios.js";
import {message} from "ant-design-vue";
const createTodo = reactive({
  title:'',
  todoProfile:'',
});
const labelCol = {
  style: {
    width: '150px',
  },
};
const wrapperCol = {
  span: 14,
};
const todayTodoList = ref([]);
const historyTodoList = ref([]);
const getTodayTodoList = () => {
   myAxios.get('/todo/getTodayList').then(
       res => {
         if(res.code === 0){
           todayTodoList.value = res.data;
         }else{
           message.error("获取数据失败");
         }
       }
   ).catch(
       error => {
         console.log("历史todo请求出异常了",error)
       }
   )
}
const getHistoryTodoList = (isFinish,searchText) => {
  let url = '/todo/list?isFinish='+isFinish + '&searchText=';
  if(searchText !== undefined){
    url += searchText;
  }
    myAxios.get(url).then(
        res => {
          if(res.code === 0){
            historyTodoList.value = res.data;
            console.log(historyTodoList.value)
          }else{
            message.error("获取数据失败");
          }
        }
    ).catch(
        error => {
          console.log("今日todo请求出异常了",error)
        }
    )
}
onMounted(() => {
  getTodayTodoList();
  getHistoryTodoList(-1);
})
</script>

<style scoped>

</style>